<template>
  <div class="menu-bar">
    <div class="xt-main-container">
      <el-menu
        :default-active="activeMenu"
        background-color="transparent"
        text-color="#ffffff"
        active-text-color="#fff"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/Cinziqao">心理科普</el-menu-item> 
        <el-menu-item index="/Cinziqao/Faq">心理问答</el-menu-item> 
        <el-menu-item index="/Cinziqao/Test">心理测评</el-menu-item>
        <el-menu-item index="/Cinziqao/Consult">心理咨询</el-menu-item>
        <el-menu-item index="/Cinziqao/Game">心理训练</el-menu-item> 
        <el-menu-item index="/Cinziqao/PersonalCenter">心理空间</el-menu-item> 
      </el-menu>
      <!-- <div style="margin:7px 0 0 170px;"> 
        <el-input placeholder="请输入关键字" v-model="keyword" class="input-with-select">  
          <el-button slot="append" icon="el-icon-search" @click="handleSearchKeyword()"></el-button>
        </el-input>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyMenuBar',
  data() {
    return {
      keyword:''
    }
  },
  computed: {
    activeMenu() {
      return this.$store.state.activeMenu
    }
  },
  methods: {
    handleSelect(key) {
      if (utils.checkStartExam()) {
        if (key !== '/LearningHome/OnlineExams') {
          this.$notify.error('正在考试中')
        }
        this.$store.commit('updateActiveMenu', '')
        setTimeout(() => {
          this.$store.commit('updateActiveMenu', '/LearningHome/OnlineExams')
        }, 500)
        return
      }
      this.$store.commit('updateActiveMenu', key)
      this.$router.push(key)
    },
    handleSearchKeyword(key) {
      if (utils.checkStartExam()) { 
        this.$notify.error('正在考试中') 
        return
      } 
      this.$router.push({path:"/LearningHome/Search",query:{"keyword":this.keyword}}) 
    }
  }
}
</script>
<style lang="less">
.menu-bar {
  background-color: #cb2c21;
  font-size: 18px;
  padding: 0px 180px 0px 180px;
  .el-menu--horizontal {
    display: flex;
    justify-content: center;

    .el-menu-item:hover {
      color: #830e06 !important;
      font-weight: 700;
    }

    .el-menu-item {
      flex: 1;
      border-bottom: none;
      font-size: 18px;
      letter-spacing: 1.2px;
      height: 54px;
      display: flex;
      align-content: center;
    }
    .el-menu-item.is-active {
      background-color: #bb0f04 !important;
      font-weight: bold;
    }

    .el-menu-item.is-active:hover {
      color: #c21104 !important;
    }
  }
  .el-menu.el-menu--horizontal,
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: none;
  }
}
</style>
